'use strict'

import React from 'react'
import './index.less'
class Box extends React.Component {
    render() {
        const { title, height = '100%', children, bodyPaddingTop = 1, titlePaddingTop, margin, overflow } = this.props

        const headerbg = {
            background: 'url(/assets/images/homepage/bigscreen/headertitlebg.png) no-repeat',
            backgroundSize: '100% 100%',
        }
        return (
            <div style={{ height, width: '100%', margin: margin || "0px 0px 28px" }}>
                <div style={{
                    height: height, listStyle: 'none', overflow: overflow || 'hidden',
                    backgroundImage: 'linear-gradient(180deg, #00204a00 3%, #50c9f71a 100%)',
                }}>
                    <div style={{ height: 42, paddingLeft: 24, paddingTop: '4px', wordBreak: 'keep-all', whiteSpace: 'nowrap', width: '100%', ...headerbg }}>
                        <span className='card-title'>{title}</span><div className='_sorrow' />
                    </div>
                    <div
                        style={{
                            width: '100%', height: 2,
                            marginTop: titlePaddingTop || 10, marginBottom: bodyPaddingTop || 25,
                        }} />
                    {children}
                </div>
            </div>
        )
    }
}
export default Box

